<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>Beijing AQI</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

</head>

<body style="height: 100%; margin: 0">
	<div id="container" style="height:100%"></div>
	<script type="text/javascript" src="static/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="static/js/jquery.min.js"></script>
	<script type="text/javascript">
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		app.title = "Beijing AQI";
		myChart.showLoading();

		$.getJSON('echarts/line-aqi-data.ins', function(data) {
			myChart.hideLoading();
			myChart.setOption(option = {
				title : {
					text : 'Beijing AQI'
				},
				tooltip : {
					trigger : 'axis' // 提示框组件：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
				},
				xAxis : {
					data : data.map(function(item) {
						return item[0];
					})
				},
				yAxis : {
					splitLine : {
						show : false
					// 横向的坐标分割线
					}
				},
				toolbox : { // 工具栏
					left : 'center',
					feature : {
						dataZoom : { // 区域缩放
							yAxisIndex : 'none'
						},
						restore : {}, // 还原
						saveAsImage : {}
					// 保存为png图片
					}
				},
				dataZoom : [ {
					startValue : '2014-06-01'
				}, {
					type : 'inside' // 鼠标滚轮在图上依然起作用
				} ],
				visualMap : {
					top : 10, // visualMap组件的位置
					right : 10,
					pieces : [ {
						gt : 0,
						lte : 50,
						color : '#096'
					}, {
						gt : 50,
						lte : 100,
						color : '#ffde33'
					}, {
						gt : 100,
						lte : 150,
						color : '#ff9933'
					}, {
						gt : 150,
						lte : 200,
						color : '#cc0033'
					}, {
						gt : 200,
						lte : 300,
						color : '#660099'
					}, {
						gt : 300,
						color : '#7e0023'
					} ],
					outOfRange : {
						color : '#999'
					}
				},
				series : {
					name : 'Beijing AQI',
					type : 'line',
					data : data.map(function(item) {
						return item[1];
					}),
					markLine : {
						silent : true, // 不响应和触发鼠标事件
						data : [ {
							yAxis : 50
						}, {
							yAxis : 100
						}, {
							yAxis : 150
						}, {
							yAxis : 200
						}, {
							yAxis : 300
						} ]
					}
				}
			});
		});
		;
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	</script>
</body>
</html>
